<template>
    <div id="app">
      <el-row>
        <el-col :span="24">
          <div class="bgc1">asdasda</div>
        </el-col>
      </el-row>
  
      <el-row>
        <el-col :span="12">
          <div class="bgc2">1</div>
        </el-col>
        <el-col :span="12">
          <div class="bgc3">2</div>
        </el-col>
      </el-row>
  
      <el-row>
        <el-col :span="4">
          <div class="bgc1">1</div>
        </el-col>
        <el-col :span="4">
          <div class="bgc2">1</div>
        </el-col>
        <el-col :span="4">
          <div class="bgc3">1</div>
        </el-col>
        <el-col :span="4">
          <div class="bgc1">1</div>
        </el-col>
        <el-col :span="4">
          <div class="bgc2">1</div>
        </el-col>
        <el-col :span="4">
          <div class="bgc3">1</div>
        </el-col>
      </el-row>
  
  
      <el-row :gutter="200">
        <el-col :span="6">
          <div class="bgc1">1</div>
        </el-col>
        <el-col :span="6">
          <div class="bgc2">1</div>
        </el-col>
        <el-col :span="6">
          <div class="bgc3">1</div>
        </el-col>
        <el-col :span="6">
          <div class="bgc1">1</div>
        </el-col>
      </el-row>
  
  
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="bgc1">1</div>
        </el-col>
        <el-col :span="8">
          <div class="bgc2">1</div>
        </el-col>
      </el-row>
  
  
  
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="bgc1">1</div>
        </el-col>
        <el-col :span="6" :offset="6">
          <div class="bgc2">1</div>
        </el-col>
      </el-row>
  
  
      <el-row class="aaa" type="flex" justify="space-between" align="bottom">
        <el-col class="bbb" :span="6" :pull="2">
          <div class="bgc1">1</div>
        </el-col>
        <el-col class="bbb" :span="6" :push="2">
          <div class="bgc2">1</div>
        </el-col>
        <el-col class="bbb" :span="6">
          <div class="bgc3">1</div>
        </el-col>
      </el-row>
  
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    data: function () {
      return {
        count: 0
      }
    },
    methods: {
      add() {
        console.log(100)
      }
    }
  }
  </script>
  
  <style>
  .bgc1 {
    background-color: red;
  }
  
  .bgc2 {
    background-color: blue;
  }
  
  .bgc3 {
    background-color: yellow;
  }
  
  .aaa {
    height: 300px;
    background-color: pink;
    ;
  }
  
  .bbb {
    height: 100px;
    background-color: orange;
  }
  </style>